import { Menu, Icon } from 'antd';
import React from "react";
import config from "./config/index.js";
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const {menus} = config;
class Sider extends React.Component {
  constructor(){
    super();
    this.state = {
        menus:menus,
        iframeUrl:'javascript:void(0)',
        defaultOpenKeys:['001'],
        defaultSelectedKeys:['001002']
    }
  }

  onOpenChange(e){
    let defaultOpenKeys = e;
    localStorage.setItem('defaultOpenKeys',defaultOpenKeys);
  }

  handleClick = (e) => {
    e.key?this.setState({
      iframeUrl:e.key
    }):this.setState({
      iframeUrl:"javascript:void(0)"
    });
    let path = e.key;
    let defaultSelectedKeys = path.split(',');
    localStorage.setItem('defaultSelectedKeys',defaultSelectedKeys)
  }
  
  initDefaultOpenKeys(){
    let defaultOpenKeys = localStorage.getItem('defaultOpenKeys');
    let defaultSelectedKeys = localStorage.getItem('defaultSelectedKeys');
      this.setState({
      defaultOpenKeys:defaultOpenKeys?defaultOpenKeys.split(','):[],
      defaultSelectedKeys:defaultSelectedKeys?defaultSelectedKeys.split(','):'',
      iframeUrl:defaultSelectedKeys
    })
    
  }

  componentDidMount(){
      this.initDefaultOpenKeys();
  }

  render() {
    return (
      <div className="container">
        <div className="nav">
              <Menu
              onClick={this.handleClick}
              onOpenChange={this.onOpenChange}
              style={{ width: 256 }}
              defaultSelectedKeys={this.state.defaultSelectedKeys}
              defaultOpenKeys={this.state.defaultOpenKeys}
              mode="inline"
              >
                  {
                     this.state.menus.map((nav)=>{
                        return (
                          <SubMenu key={nav.id} title={nav.title}>
                             {
                               nav.children.map((item)=>{
                                  return <Menu.Item key={item.path}>{item.title}</Menu.Item>
                               })
                             }      
                          </SubMenu>
                        )         
                    })
                  }
              </Menu>
            </div>
        <div className="body">
           <iframe frameBorder='0' src={this.state.iframeUrl}></iframe> 
        </div>
      </div>
    );
  }
}

export default Sider;